<template>
    <EChart width="100%" height="500px" :options="options"/>
    <p>
        从以上两图中，我们可以看出这两图是有关联的，当发生货币危机的时候，通胀危机紧随而来，两者
        具有一定的相关性，这是因为当一国政府掌握有货币的发行权时，政府可以通过发行新的货币，以投放
        过量的货币来偿还债务，从而会带来通货膨胀，本币币值波动，进而引发货币危机。
    </p>
</template>
<script setup lang="ts">
import {getCountData} from '@/api/country';
import {EChartsOption} from 'echarts';
import EChart from "@/components/EChart";

const countData1 = getCountData('currencyCrises', 1);
const countryArr: string[] = Object.keys(countData1);
const countArr: number[] = Object.values(countData1).map(item => item!['count']);
const countArr1: number[] = Object.values(getCountData('inflationCrises', 1)).map(item => item!['count']);
onMounted(() => {
    options.yAxis!['data'] = countryArr;
    options.series![0]['data'] = countArr;
    options.series![1]['data'] = countArr1;
});
const options = reactive<EChartsOption>({
    title: {
        text: '危机',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
    },
    yAxis: {
        type: 'category',
        data: [],
    },
    series: [
        {
            name: '货币危机',
            type: 'bar',
            data: [],
        },
        {
            name: '通货膨胀危机',
            type: 'bar',
            data: [],
        },
    ],
});
</script>
<style scoped>

</style>
